<template>
  <div>
    <div class="right">
      <div class="other">
        <div class="item item1">
          <div class="container1">
            <p><ion-icon name="phone-portrait-outline" class="iconfont"></ion-icon></p>
            <span class="text1">手机APP</span>
          </div>
          <div class="leftImage">
            <div class="image">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png"
              />
            </div>
            <span>扫码领取新人百元礼包</span>
          </div>
        </div>
        <div class="item item2">
          <div class="container1" @click="goToMy">
            <p><ion-icon name="person-outline" class="iconfont"></ion-icon></p>
            <p class="text1">个人中心</p>
          </div>
        </div>
        <div class="item item3">
          <div class="container1">
            <p><ion-icon name="build-outline" class="iconfont"></ion-icon></p>
            <p class="text1">售后服务</p>
          </div>
        </div>
        <div class="item item4">
          <div class="container1" >
            <p><ion-icon name="call-outline"  class="iconfont"></ion-icon></p>
            <p class="text1">人工客服</p>
          </div>
        </div>
        <div class="item item5">
          <div class="container1" @click="goToCart">
            <p><ion-icon name="cart-outline"  class="iconfont"></ion-icon></p>
            <p class="text1">购物车</p>
            <div id="cartAmount" v-if="cartAmount > 0">{{ cartAmount }}</div>
          </div>
        </div>
      </div>
      <div class="toTop">
        <div class="item item6">
          <div class="container1">
            <a href="javascript:scroll(0,0)">
              <p><ion-icon name="arrow-up-circle-outline" class="iconfont"></ion-icon></p>
              <p class="text1">回顶部</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessageBox} from "element-plus";
import router from "../router/index.js";

export default {
  data() {
    return {};
  },
  props: {
    cartAmount: Number,
  },
  methods: {
    goToMy(){
      if (sessionStorage.getItem('username')) {
        this.$router.push('/User/info')
      }else{
        ElMessageBox.confirm(
            '您还未登录，是否去登陆？',
            '温馨提示',
            {
              confirmButtonText: '立马去',
              cancelButtonText: '我先看看',
              type: 'warning',
            }
        )
            .then(() => {
              router.push("/login");
            })
      }
    },
    goToCart() {
      if (sessionStorage.getItem('username')) {
        this.$router.push("/User/cart");
      }else {
        ElMessageBox.confirm(
            '您还未登录，是否去登陆？',
            '温馨提示',
            {
              confirmButtonText: '立马去',
              cancelButtonText: '我先看看',
              type: 'warning',
            }
        )
            .then(() => {
              router.push("/login");
            })
      }
    },
  },
  mounted() {
    if (this.$route.path == "/Home") {
      window.onscroll = function () {
        let top = document.documentElement.scrollTop;
        if (top < 1000) {
          let toTop = document.getElementsByClassName("toTop")[0];
          if (toTop && toTop.style) {
            toTop.style.display = "none";
            let right = document.getElementsByClassName("right")[0];
            right.style.top = "490px";
          }
        } else {
          let toTop = document.getElementsByClassName("toTop")[0];
          if (toTop && toTop.style) {
            toTop.style.display = "block";
            let right = document.getElementsByClassName("right")[0];
            right.style.top = "374px";
          }
        }
      };
    }

  },
};
</script>

<style scoped>
.right {
  z-index: 110;
  position: fixed;
  right: 0;
  top: 25%;
  width: 84px;
  height: 450px;
  text-align: center;
}
.right .other {
  width: 100%;
  position: absolute;
  top: -26%;
  background-color: #fff;
}
.right .toTop {
  display: none;
  width: 100%;
  position: absolute;
  bottom: -15%;
  background-color: #fff;
}
.item {
  width: 100%;
  height: 92px;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}
.item .container1 {
  position: relative;
  display: block;
  width: 82px;
  height: 90px;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid #f5f5f5;
  text-align: center;
}
.item .container1 .text {
  margin-top: 25px;
  font-size: 14px;
  font-family: Helvetica;
  text-align: center;
}

.item1 .text1 {
  font-size: 14px;
  color: #757575;
}
.item1 .iconfont {
  font-size: 30px;
  color: #999999;
}
.item1:hover .text1,
.item1:hover .iconfont {
  color: #ff6700;
}
.item1 .leftImage {
  display: none;
  position: absolute;
  top: 0;
  right: 100px;
  width: 130px;
  height: 192px;
  background-color: #fff;
}
.item1:hover .leftImage {
  display: block;
}
.item1 .leftImage .image {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 15px;
}
.item1 .leftImage .image img {
  width: 100px;
  height: 100px;
}
.item1 .leftImage span {
  display: inline-block;
  width: 80px;
  position: absolute;
  top: 130px;
  left: 25px;
  font-size: 14px;
  color: #757575;
}
.item2 .text1 {
  font-size: 14px;
  color: #757575;
}
.item2 .iconfont {
  font-size: 30px;
  color: #999999;
}
.item2:hover .text1,
.item2:hover .iconfont {
  color: #ff6700;
}
.item3 .text1 {
  font-size: 14px;
  color: #757575;
}
.item3 .iconfont {
  font-size: 30px;
  color: #999999;
}
.item3:hover .text1,
.item3:hover .iconfont {
  color: #ff6700;
}
.item4 .text1 {
  font-size: 14px;
  color: #757575;
}
.item4 .iconfont {
  font-size: 30px;
  color: #999999;
}
.item4:hover .text1,
.item4:hover .iconfont {
  color: #ff6700;
}
.item5 {
  position: relative;
}
.item5 .text1 {
  font-size: 14px;
  color: #757575;
}
.item5 .iconfont {
  font-size: 30px;
  color: #999999;
}
.item5 #cartAmount {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 18px;
  height: 15px;
  background-color: #ff6700;
  border-radius: 50% / 50%;
  font-size: 12px;
  color: #fff;
}
.item5:hover .text1,
.item5:hover .iconfont {
  color: #ff6700;
}
.item6 .text1 {
  font-size: 14px;
  color: #757575;
}
.item6 .iconfont {
  font-size: 30px;
  color: #999999;
}
.item6:hover .text1,
.item6:hover .iconfont {
  color: #ff6700;
}
a {
  text-decoration: none;
}
</style>
